(function () {
    function ce(tag) {
        return document.createElement(tag);
    }
    function addCe(tagElement, parentElement, classname) {
        var tagElement = ce('div');
        tagElement.className = classname;
        parentElement.appendChild(tagElement);
        return tagElement;
    }
    function colorRGB2Hex(color) {
        var r = color[0];
        var g = color[1];
        var b = color[2];
        var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        return hex.toUpperCase();
    }

    //创建左调色板
    var colorpiker = document.getElementById('colorpiker');
    _this.left_palette = addCe('left_palette', colorpiker, 'left-palette');
    _this.left_palette_black = addCe('left_palette_black', _this.left_palette, 'left-palette-black');

    //创建右调色板and上下拉动条
    _this.right_palette = addCe('right_palette', colorpiker, 'right-palette');
    _this.palette_rule = addCe('palette_rule', _this.right_palette, 'rule');
    // console.log(palette_rule)

    //创建颜色展示区和文字展示区
    var tone = addCe('tone', colorpiker, 'tone');
    var rgbInner = addCe('rgbInner', colorpiker, 'rgb-inner');

    // var before = window.getComputedStyle(_this.left_palette_black[0], ':before')

    // console.log(before)
    //左调色板
    // var left_palette = document.getElementById('left_palette');
    // var palette_spot = document.getElementById('palette_spot');
    // //右调色板
    // var right_palette = document.getElementById('right_palette');
    // var palette_rule = document.getElementById('palette_rule');
    // //选中的颜色
    // var tone = document.getElementById('tone');
    //右边色盘的RGB








    var right_color = [255, 0, 0];
    //获取右边色盘RGB输出值
    _this.palette_rule.addEventListener('mousedown', function (e) {
        //起始Y
        console.log('sk')
        var startY = e.pageY;
        //偏移值
        var top = _this.palette_rule.offsetTop;
        //添加move事件监听
        document.body.addEventListener('mousemove', mouseMovEven);
        function mouseMovEven(event) {
            var y = event.pageY - startY + top;
            y = y > 180 ? 180 : (y < 0 ? 1 : y);
            if (y > 175) { return };
            _this.palette_rule.style.top = y + 'px';
            var scaler = Math.ceil(y / 30);
            var color = Math.ceil(255 - (scaler * 30 - y + 1) * (255 / 30));
            console.log(scaler)
            switch (scaler) {
                case 0: right_color = [255, color, 0]
                    break;
                case 1: right_color = [255, color, 0];
                    break;
                case 2: right_color = [Math.abs(255 - color), 255, 0];
                    break;
                case 3: right_color = [0, 255, color];
                    break;
                case 4: right_color = [0, Math.abs(255 - color), 255];
                    break;
                case 5: right_color = [color, 0, 255];
                    break;
                case 6: right_color = [255, 0, Math.abs(255 - color)];
                    break;
                default: right_color = [255, color, 0]
                    break;
            }
            _this.left_palette.style.backgroundColor = 'rgb(' + right_color.join(',') + ')'
        }
        document.body.addEventListener('mouseup', function () {
            document.body.removeEventListener('mousemove', mouseMovEven, false);
        });
    });
    //左边选色
    var xSelectColor = [];
    _this.left_palette.addEventListener('mousemove', function (e) {
        xSelectColor = right_color.map(function (val, index) {
            var w = e.offsetX
            return parseInt(255-w*(255-val)/300) 
        });
        console.log(xSelectColor)
        var colorStr = colorRGB2Hex(xSelectColor);
        rgbInner.innerHTML = colorStr;
        _this.last_color = colorStr;
        tone.style.backgroundColor = 'rgb(' + xSelectColor.join(',') + ')';
    });

})()
			// xgj18Lang